<template>
  <div class="container">
    <div class="search">
      <div class="search-item">
        <div class="search-title"> 关键字 </div>
        <a-input allowClear v-model:value.trim="params.keyword" placeholder="用户名/手机号/所在公司" @search="search"
          style="width: 260px;margin-right: 0px;" />
      </div>
      <div>
        <a-button type="primary" style="margin-right: 10px;">搜索</a-button>
        <a-button type="primary" style="margin-right: 10px;">重置</a-button>
      </div>

    </div>
    <div class="table-box">
      <a-table :pagination="false" :columns="columns" :data-source="listData">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'status'">
            <span>{{ record.status == 0 ? '正常' : '锁定' }}</span>
          </template>
          <template v-if="column.key == 'action'">

            <a-button type="link" @click="toAuth(record)" style="padding: 0 2px">授权</a-button>
          </template>
        </template>
      </a-table>
      <!-- @change="onChange" -->
      <a-pagination :show-total="total => `总共${total} 条`" style="float: right;margin: 20px 0;"
        v-model:page-size="filterData.pageSize" v-model:current="filterData.pageNum" :total="total"
        show-quick-jumper></a-pagination>
    </div>
    <!-- 授权 -->
    <!-- :rules="rules" -->
    <a-modal :maskClosable="false" title="授权" v-model:open="modalVisible" @ok="submit">
      <a-form :label-col="{ span: 5, offset: 2 }" :wrapper-col="{ span: 14 }" ref="formDataRef" :model="formData">
        <a-form-item label="读写" name="function">
          <a-select placeholder="请选择读写权限" mode="multiple" v-model:value="formData.function" style="width: 275px">
            <a-select-option value="读">读</a-select-option>
            <a-select-option value="写">写</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="有效期" name="time">
          <a-input v-model:value="formData.time" suffix="月" placeholder="请输入时间"></a-input>
        </a-form-item>
        <a-form-item label="区域" name="area">
          <a-tree checkable :tree-data="treeData" v-model:checkedKeys="checkedKeys" v-model:expandedKeys="expandedKeys">
          </a-tree>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { userList, } from "@/api/user";
import { auth, } from "@/api/permission";


export default {
  data() {
    return {

      modalVisible: false,
      formData: {
        function: [],
        area: []
      },
      params: {
        keyword: ''
      },
      filterData: {
        pageSize: 1,
        pageNum: 10,
      },
      total: 0,
      columns: [
        { title: "用户名", dataIndex: "userName", key: "userName", align: "center" },
        { title: "状态", dataIndex: "status", key: "status", align: "center" },
        { title: "角色", dataIndex: "role", key: "role", align: "center" },
        { title: "所属单位", dataIndex: "company", key: "company", align: "center" },
        {
          title: "操作",
          // width: 80,
          fixed: "right",
          align: "center",
          dataIndex: "action", key: "action",
        },

      ],
      listData: [
        {
          userId: 1,
          userName: 'zhangsan',
          realName: '张三',
          phone: '1333333333',
          role: '作业员',
          status: 0,
          createTime: '2025-10-29 14:46',
          company: '公司1'
        },


      ],
      treeData: [
        {
          title: '延庆区',
          key: 'yanqing',
          children: [
            {
              title: '张山营镇',
              key: 'zhangshanying',

            },
            {
              title: '康庄镇',
              key: 'kangzhuang',
            },
          ],
        },
        {
          title: '密云区',
          key: 'miyun',
          children: [
            {
              title: '镇1',
              key: 'zhen1',

            },
            {
              title: '镇2',
              key: 'zhen2',
            },
          ],
        },
      ],
      checkedKeys: [],
      expandedKeys: []
    }
  },
  components: {},
  computed: {

  },
  mounted() {

    // this.getUserList()

  },
  methods: {
    getUserList() {
      userList(this.filterData)
        .then((res) => {
          console.log(res, 8888);
          if (res.code == 200) {
            this.listData = res.data
            this.total = res.total
          }
        })
        .catch(() => { });
    },
    // onChange(e) {
    //   this.filterData.pageNum = e
    //   this.getUserList()
    // },

    // 新增/编辑 管理员
    toAuth(data) {
      console.log(data);
      this.modalVisible = true;


      //首先获取权限

      this.$nextTick(() => {
        this.$refs.formDataRef.resetFields()
        this.formData = {
          function: ['读'],
        };
        this.checkedKeys = ['zhangshanying']
        this.expandedKeys = ['yanqing',]

      })

    },
    submit() {
      //新增或者编辑
      this.$refs.formDataRef.validate(() => {
        let formData1 = JSON.parse(JSON.stringify(this.formData))
        auth(formData1)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success('授权成功')
              this.getUserList()
            }
          })
          .catch(() => { });
      })

    },
    search() {

    }

  }
}
</script>


<style scoped lang="less">
.container {
  height: 100%;
  overflow: auto;

  .search {
    display: flex;
    flex-wrap: wrap;

    .search-item {
      margin: 0 15px 15px 0;
      font-size: 16px;
      display: flex;
      align-items: center;

      .search-title {
        font-size: 15px;
        color: #333333;
        margin-right: 10px;
        font-weight: 400;

      }
    }
  }



  .table-box {}
}
</style>
